<template>
<div>
    <h5>选择一定要去的城市，可多选（非必选）</h5>
    <form v-for="(item,index) in data_all" :key="index">
        <fieldset @click.self="onchoose(item.city,$event)" :class={check:ischeck}>
            <legend>{{item.city}} ( {{item.country}} )</legend>
            <div class="content">
                <img :src="item.poi_pic_url" alt="">
                <p>
                    <!-- {{item.abstracts}} -->
                    {{item.abstracts | cut}}
                </p>
            </div>
        </fieldset>
    </form>
</div>

</template>
<script>
import Axios from "@/api/http"
export default {
    data(){
        return{
            ischeck: false,
            //[国家] 中文
            city:[],
            //["洲.国家" "洲.国家"] 英文
            en:[],
            //[洲.国家.洲.国家] 英文
            en_split:[],
            //[洲] 英文
            en_split_first:[],
            //[国家，国家，国家] 英文
            en_country:[],
            //请求来的所有数据，对象
            data_all:[],
            //选择的城市
            choose_city:[]
        }
    },
    methods:{
        onchoose(c,e){
            console.log(c);
            if(this.choose_city.length == 0) {
                e.target.className = "ischeck"
                this.choose_city.push(c)
            } else {
                let index = this.choose_city.indexOf(c)
                if(index == -1){
                    e.target.className = "ischeck"
                    this.choose_city.push(c)
                } else {
                    e.target.className = "isnotcheck"
                    this.choose_city.splice(index,1)
                }
            }
            
            console.log(this.choose_city);
            this.$store.commit('rational/setcities',this.choose_city)
            console.log(this.$store.state.rational.cities);

        }
    },
    filters:{
        cut(abstracts){
            if(abstracts.length>40){
                return abstracts.substr(0,40)+'...'
            }
        }
    },
    created() {
        this.city = this.$store.state.rational.cgcity
        // this.$nextTick(()=>{
        //     console.log(this.city);
        // })
        this.en = this.$store.state.rational.en_all
        // console.log(this.en);
        //洲.国家.洲.国家 英文
        this.en_split = this.en.join(".").split('.')
        // console.log(this.en_split)
        //[国家，国家，国家] 英文
        this.en_split.forEach((item,index) => {
            if(index % 2 != 0) {
                this.en_country.push(item)
            } else if( index == 0) {
                this.en_split_first.push(item)
            }
        })
        Axios.post("http://www.51houniao.com/requirement/destination/getCitiesByCountries",{
            continent_en: this.en_split_first,
            country_en: this.en_country,
            order_by: "SHOW_TOP",
            show_flag: 1,
            type: 2
        }).then((res) => {
            this.data_all=res.poi_list
            console.log(this.data_all);
            console.log(this.city);
            this.data_all.forEach((item,index) => {
                // if(this.city.indexOf(item.city) != -1) {
                //     this.pick_city_arr.push(item)
                //     console.log(this.pick_city_arr);
                // }
                
            })
        }).catch((err) => {
            console.log(err);
        })
        },
    
}
</script>

<style scoped>
.ischeck{
    background-color: rgb(217, 224, 223);
}
.isnotcheck{
    background-color: #fff;
}
legend{
    margin-left: 40%;
    color: #666;
    
    margin-bottom: 10px;
}
.content{
    display:flex;
    font-size:12px;
}
.content img{
    width:45%;
    height:75px;
}
.content p{
    width:60%;
    color: #A0A0A0;
    margin-left: 10px;
}
</style>